{% stylesheet %}
.block_video .video_empty{
    background-color: #EEF0F5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
.block_video iframe{
    width: 100%;
}

.block_video .block_video_content_format_1{
    display: flex;
    align-items: center;
}

.block_video .block_video_content_format_1 .block_title{
    width: 50%;
    text-align: left;
    margin: 0;
    padding-right: 10%;
    box-sizing: border-box;
}
.block_video .block_video_content_format_2 .block_title{
    width: 50%;
    text-align: left;
    margin: 0;
    padding-left: 10%;
    box-sizing: border-box;
}
.block_video .block_video_content_format_1 iframe,
.block_video .block_video_content_format_1 .video_empty,
.block_video .block_video_content_format_2 iframe,
.block_video .block_video_content_format_2 .video_empty{
    width: 50%;
}
.block_video .block_video_content_format_1 iframe{
    width: 50%;
}
.block_video .block_video_content_format_2{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
@media (max-width: 767px) {
    .block_video .block_video_content_format_2,
  .block_video .block_video_content_format_1{
    display: block;
  }
  .block_video .block_video_content_format_2 .block_title{
    margin: 0;
    width: 100%;
    text-align: center;
    padding: 0;
    margin-bottom: calc(var(--general_layout_spacing) * 0.5);
}
  .block_video .block_video_content_format_1 .block_title{
    width: 100%;
    text-align: center;
    padding: 0;
    margin-bottom: calc(var(--general_layout_spacing) * 0.5);
  }
  .block_video .block_video_content_format_1 iframe{
    width: 100%;
  }
  .block_video .block_video_content_format_1 .video_empty{
    width: 100%;
  }
  .block_video .block_video_content iframe{
    width: 100%;
  }
  .block_video .block_video_content .video_empty{
    width: 100%;
  }
}
{% endstylesheet %}
<div class="block_video" id="block_video_{{ block_id | default : section.block_id }}">
    <div class="container_wrapper">
        <div class="block_video_content block_video_content_{{ section.settings.format }} block_video_content_{{ section.settings.proportion }}">
            {% if section.settings.title != '' or section.settings.detail != '' %}
            <div class="block_title">
                {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
                {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
            </div>
            {% endif %}
            {% if section.settings.link.model %}
            <iframe id="iframe_{{ block_id | default : section.block_id }}" src="{{ section.settings.link.model | replace: "https:", "" }}" ></iframe>
            {% else %}
            <div class="video_empty">
                {% include 'icon_video' ,{width:'100',height:'100'} %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
<script type="text/javascript">
    var _width = $('#block_video_{{ block_id | default : section.block_id }} iframe').width();
    {% if section.settings.proportion == "proportion_1" %}
    var _height = parseInt(_width) * 9 / 16;
    {% else %}
    var _height = parseInt(_width) * 3 / 4;
    {% endif %}
    $('.video_empty').css('height',_height);
    $('#iframe_{{ block_id | default : section.block_id }}').attr('height',_height);
</script>

{% schema %}

{
  "tag": "",
  "class": "block_video",
  "name": {
    "zh_CN": "视频"
  },
  "max_blocks": "0",
  "is_global": false,
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail"
    },
    {
        "type": "card_select",
        "id": "format",
        "option": [
            {
              "label": {
                "zh_CN": "视频居右"
              },
              "value": "format_1"
            },
            {
              "label": {
                "zh_CN": "视频居左"
              },
              "value": "format_2"
            },
            {
              "label": {
                "zh_CN": "视频居下"
              },
              "value": "format_3"
            }
        ],
        "label": {
            "zh_CN": "PC版式方式"
        }
    },
    {
        "type": "card_select",
        "id": "proportion",
        "option": [
            {
              "label": {
                "zh_CN": "16:9"
              },
              "value": "proportion_1"
            },
            {
              "label": {
                "zh_CN": "4:3"
              },
              "value": "proportion_2"
            }
        ],
        "label": {
            "zh_CN": "视频比例"
        }
    },
    {
      "type": "card_video",
      "rule": {
        "youtube":{
          "error":{
            "zh_CN": "输入地址错误"
          }
        }
      },
      "label": {
        "zh_CN": "视频链接"
      },
      "placeholder": {
        "zh_CN": "请输入Youtube视频的URL"
      },
      "info": {
        "zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX"
      },
      "id": "link"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "format": "format_3",
      "proportion": "proportion_1",
      "link": {
        "value":"",
        "model":""
      },
      "title": "Video",
      "detail": "Use this text to share information about your brand with your customers. Describe a product,share announcements,<br/>or welcome customers to your store."
    },
    "blocks": []
  }
}
{% endschema %}